<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Flot Examples: AJAX</title>
	<link href="utils/includes/flot/style.css" rel="stylesheet" type="text/css">
	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="utils/includes/flot/excanvas.min.js"></script><![endif]-->
	<script language="javascript" type="text/javascript" src="utils/includes/flot/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="utils/includes/flot/jquery.flot.js"></script>
	<script type="text/javascript">

	$(function() {

		var options = {
				series:{
			points: {
				show: true,
				radius: 3,
                fill: true
			},
		},
			xaxis: { 
				axisLabel: "DOM"
				 },
			yaxis: { 
						axisLabel: "Percent to Hud"
					}
				 
		};

		var data = [];

		$.plot("#placeholder", data, options);

		// Fetch one series, adding to what we already have

		var alreadyFetched = {};

		$("button.fetchSeries").click(function () {

			var button = $(this);

			// Find the URL in the link right next to us, then fetch the data

			var dataurl = button.siblings("a").attr("href");

			function onDataReceived(series) {

				// Extract the first coordinate pair; jQuery has parsed it, so
				// the data is now just an ordinary JavaScript object

				// Push the new data onto our existing data array
				series.forEach(function(dataSeries) {
					if (!alreadyFetched[dataSeries.label]) {
						alreadyFetched[dataSeries.label] = true;
						data.push(dataSeries);
					}	
				});
				

				$.plot("#placeholder", data, options);
			}

			$.ajax({
				url: dataurl,
				type: "GET",
				dataType: "json",
				success: onDataReceived
			});
		});

		// Load the first series by default, so we don't have an empty plot

		$("button.fetchSeries:first").click();

	});

	</script>
</head>
<body>

	<div id="header">
		<h2>HHS Data Analyzer</h2>
	</div>

	<div id="content">

		<div class="demo-container">
			<div id="placeholder" class="demo-placeholder"></div>
		</div>

		<p>
			<button class="fetchSeries">First dataset</button>
			[ <a href="HHSData.php">see data</a> ]
			<span></span>
		</p>

	</div>

</body>
</html>
